<template>
	<view class="cost-info">
		<view class="cost-info-header" @click="onClickDate">
			<text>{{dateText}}</text>
			<u-icon :name="iconName"></u-icon>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" :active-color='themeColorLight' @change="change"></u-tabs>
		<view class="div-cut" style="margin-bottom: 30rpx;"></view>
		<view class="cost-info-main">
			<view v-for="(item,index) in listData" :key="index" class="cost-info-main-item">
				<view class="card-row"><label>执行日期：</label>{{item.zxrq}}</view>
				<view class="card-row"><label>大项目名称：</label>{{item.dxmmc}}</view>
				<view class="card-row"><label>项目名：</label>{{item.xmmc}}</view>
				<view class="card-row"><label>执行科室：</label>{{item.zxksmc}}</view>
				<view class="card-row"><label>项目单价：</label>{{item.xmdj}}</view>
				<view class="card-row"><label>项目数量：</label>{{item.xmsl}}</view>
				<view class="card-row"><label>优惠单价：</label>{{item.yhdj}}</view>
				<view class="card-row"><label>总金额：</label>{{item.zje}}</view>
				<view class="div-cut"></view>
			</view>
			<u-empty text='暂无费用信息' mode="list" v-if="listData.length===0&&!load"></u-empty>
		</view>
		<u-calendar v-model="showDate" :mode="dateMode" @change='onChange'></u-calendar>
		<Load :load="load" />
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { themeColorLight } from '@/static/js/theme.js'
	import { getOneDayInfo, getCostList } from '@/api/home.js'
	import dayjs from 'dayjs'
	export default {
		components:{ Load, UserDate },
		data() {
			return {
				themeColorLight,
				dateText:'2021-06-22',
				oneDate:'',
				rangeDate:'',
				iconName:'arrow-down',
				load:false,
				showDate:false,
				dateMode:'date',
				list:[{name:'一日清单'},{name:'费用信息'}],
				current:0,
				listData:[],
				routeParams:''
			}
		},
		onLoad(op) {
			if(op.params){
				this.routeParams = JSON.parse(op.params)
			}
			this.oneDate = dayjs().format("YYYY-MM-DD")
			this.rangeDate = {
				startDate: dayjs().format("YYYY-MM-DD"),
				endDate: dayjs().format("YYYY-MM-DD")
			}
			this.dateText = this.oneDate
			this.initData()
		},
		methods: {
			initData(){
				this.load = true
				if(this.current===0){
					let prams = {
						...this.routeParams,
						cxrq: this.oneDate
					}
					getOneDayInfo(prams).then(data => {
						this.load = false
						this.listData = data||[]
					}).catch(e => {
						this.load = false
						this.listData = []
					})
				}else{
					let prams = {
						...this.routeParams,
						...this.rangeDate
					}
					getCostList(prams).then(data => {
						this.load = false
						this.listData = data||[]
					}).catch(e => {
						this.load = false
						this.listData = []
					})
				}
			},
			change(val){
				this.current = val
				if(val===0){
					this.dateMode = 'date'
					this.dateText = this.oneDate
				}else{
					this.dateMode = 'range'
					if(this.rangeDate){
						this.dateText = this.rangeDate.startDate + " 至 " + this.rangeDate.endDate
					}
				}
				this.initData()
			},
			onClickDate(){
				this.showDate = true 
			},
			onChange(val){
				if(this.current===0){
					this.oneDate = val.result
					this.dateText = this.oneDate
				}else{
					this.rangeDate = {
						startDate: val.startDate,
						endDate: val.endDate
					}
					this.dateText = this.rangeDate.startDate + " 至 " + this.rangeDate.endDate
				}
				this.initData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cost-info{
		height: 100%;
		// overflow: scroll;
		background-color: #fff;
		&-header{
			height: 90rpx;
			background-color: $theme-color-light;
			color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			padding-right: 30rpx;
			>text{
				margin-right: 10rpx;
			}
		}
		&-main{
			height: calc(100vh - 90rpx - 80rpx - 40rpx);
			overflow: scroll;
			&-item{
				>.div-cut{
					margin: 30rpx 0;
				}
			}
		}
		.card-row{
			>label{
				width: 200rpx;
			}
		}
	}
</style>
